<template>
  <div class="login-banner">
			<div class="login-main" >
				<div class="login-banner-bg">
					<span></span>
					<img src="./images/big.jpg" />
				</div>

				<div class="login-box login-box-my" id="container">
					<h3 class="title">登录商城</h3>
					<!-- 登录提示信息-->
					<h5 id="tips" :style='tipsStyleObj'>{{tips}}&nbsp;</h5>
					<div class="clear"></div>

					<div class="login-form login-form-my">
						<form>
							<div class="user-name name-my">
								<label for="user">
									<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
								</label>
								<input type="text" v-model="username" placeholder="邮箱/手机/用户名" @keyup="checkLoginInfo">
							</div>
							<div class="user-pass user-pass-my">
								<label for="password">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</label>
								<input type="password" v-model="password" placeholder="请输入密码" @keyup="checkLoginInfo">
							</div>
						</form>
					</div>

					<div class="login-links" >
						<label for="remember-me">
							<input id="remember-me" type="checkbox">记住密码
						</label>
						<a href="#" class="am-fr">忘记密码</a>
						<br/>
					</div>
					<div class="am-cf">
						<input type="button" value="登 录" class="am-btn am-btn-primary am-btn-sm" @click="login">
					</div>
					<div class="am-cf">
						<input type="button" onclick="javascript:window.location.href='register.html'" value="注 册" class="am-btn am-btn-default am-btn-sm">
					</div>
					<div class="partner">
					</div>

				</div>
			</div>
		</div>
</template>

<script>
	//tips:定义基础url,方便以后更改服务器进行替换
	var baseUrl = 'http://localhost:8080';

	//引入axios插件
	import axios from 'axios'

    export default {
        name:'Login',
        data() {
			return {
				//登录信息
				username:'',
				password:'',
				//提示信息
				tips:'',
				tipsStyleObj:'',
				//登录时，校验是否已完成
				isCheckInfo:false
			}
		},
		methods: {
			//校验登录信息
			checkLoginInfo(){
				if(this.username == ''){
					this.tips = '请输入账号'
					this.tipsStyleObj = {color:'red'}
					//避免蒙混过关
					this.isCheckInfo = false
				}else if(this.username.length<8 || this.username.length>20){
					this.tips = '请输入8到20位之间的账号'
					this.tipsStyleObj = {color:'red'}
					this.isCheckInfo = false
				}else{
					if(this.password == ''){
						this.tips = '请输入密码'
						this.tipsStyleObj = {color:'red'}
						this.isCheckInfo = false
					}else if(this.password.length < 6 || this.password.length > 20){
						this.tips = '请输入6到20位之间的密码'
						this.tipsStyleObj = {color:'red'}
						this.isCheckInfo = false
					}else{
						//输入信息正确，清空提示信息，校验完成
						this.tips = ''
						this.isCheckInfo = true
					}
				}
			},
			//登录
			login(){
				if(this.isCheckInfo){
					//开始登录
					axios.get(baseUrl + "/user/login",{
						//参数信息
						params:{
							username:this.username,
							password:this.password

						}
					}).then(
						response => {
							console.log(response.data);
							if(response.data.code == 10000){
								this.tips = '登录成功'
								this.tipsStyleObj = {color:'green'}
							}else{
								this.tips = '登录失败'
								this.tipsStyleObj = {color:'red'}
							}
						},
						error => {
							this.tips = '登录失败'
							console.log(error.message);
						}
					)
		
				}else{
					this.tips = '请输入账号'
					this.tipsStyleObj = {color:'red'}
				}
			}
		},

    }
</script>

<style>
	.login-box-my {
		margin-top: 20px;
	}
	.login-form-my{
		background: none; margin-top: 15px;
	}
	.username-name-my {
		margin-top: 20px;
	}
	.user-pass-my {
		margin-top: 20px;
	}
</style>